<template>
  <div>
    <top-bar :title="topTitle"></top-bar>
    <div class="add-record-wrapper">

      <div class="immunization-information">
        <h4 class="title">接种信息</h4>
        <div class="group group-child">
         <!-- <popup-picker title="儿童姓名"
                        show-name
                        :data="childList"
                        v-model="childValue"
                        placeholder="请选择儿童"></popup-picker>-->
          <x-input title="儿童姓名" disabled  v-model="childrenName"></x-input>
        </div>
       <!-- <div class="group">
          <div class="group">
            <x-input title="接种点选择"
                     v-model="selectPoint.text"
                     @click.native="popupPoint=true"
                     placeholder="输入接种点"
                     :show-clear="false" disabled></x-input>
          </div>
        </div>-->
      </div>

      <div class="vaccine-information" v-for="(item,index) in form.hisList" :key="index"  v-if="item.status">
        <h4 class="title">疫苗信息<a @click="handleRemove(index)" v-if="index>0" class="close-text">删除</a></h4>
        <div class="group">
          <popup-picker title="接种部位"
                        :data="positionList"
                        v-model="item.positionValue"
                        @on-change="positionChange(item.positionValue,index)"
                        placeholder="请选择接种部位"></popup-picker>
        </div>
        <div class="group">
          <x-input title="接种医生"  placeholder="输入接种医生" :show-clear="false" v-model="item.inodoctor"></x-input>
        </div>
        <div class="group group-dataTime">
          <datetime
            title="接种时间"
            v-model="item.inotime"
            placeholder="选择接种时间"
            :end-date="today"
          ></datetime>
        </div>
        <div class="group">
          <x-input title="接种点"  placeholder="输入接种点" :show-clear="false" v-model="item.handcomname"></x-input>
        </div>
        <div class="group group-vaccine">
          <popup-picker title="疫苗名称"
                        show-name
                        @on-change="vaccineChange(item.vaccinateName,index)"
                        :data="vaccineList"
                        v-model="item.vaccinateName"
                        placeholder="请选择疫苗"></popup-picker>
        </div>
       <div class="group">
          <x-input title="疫苗属性"   :show-clear="false" disabled  v-model="item.attributeValue"></x-input>
        </div>
        <div class="group group-dose">
          <popup-picker title="剂次(第几针)"
                        ref="dosesListRef"
                        show-name
                        @on-change="dosesChange(item.dosesName,index)"
                        :data="item.dosesList"
                        v-model="item.dosesName"
                        placeholder="请选择剂次"></popup-picker>
        </div>
        <div class="group group-free">
          <checker v-model="item.isFree" default-item-class="demo1-item" selected-item-class="demo1-item-selected">
            <checker-item value="1" disabled >免费</checker-item>
            <checker-item value="2" disabled >自费</checker-item>
          </checker>
        </div>
        <div class="group">
          <x-input title="疫苗批号"  placeholder="请输入疫苗批号" :show-clear="false" v-model="item.bathcno"></x-input>
        </div>
        <div class="group group-commpany">
          <x-input title="疫苗厂家"  placeholder="请输入疫苗厂家" :show-clear="false" v-model="item.vaccineSupplier"></x-input>
        </div>
      </div>

      <div class="appendWrapper" ref="appendWrapper" id="appendWrapper" v-html="appendWrapperHtml">

      </div>

      <div class="continue-add">
        <a @click="continueAdd"><span>+</span>继续添加</a>
      </div>

      <div class="btn-con">
        <x-button @click.native="submit">提交接种记录</x-button>
      </div>

    </div>

    <div v-transfer-dom>
      <popup v-model="popupPoint" position="bottom" height="80%" class="record-popup">
        <div class="select-con">
          <picker :data='provinceList' v-model='provinceValue' @on-change='provinceChange' :fixed-columns="2"></picker>
          <picker :data='cityList' v-model='cityValue' @on-change='cityChange' :fixed-columns="2"></picker>
          <picker :data='countryList' v-model='countryValue' @on-change='countryChange' :fixed-columns="2"></picker>
        </div>
        <div class="content-list">
          <ul>
            <li  v-for="(item,index) in pointArray" :key="index" @click="pointClick(item)">{{item.text}}</li>
          </ul>
        </div>
      </popup>
    </div>

  </div>

</template>

<script>
   import { XInput,XButton,PopupPicker,Datetime ,Checker, CheckerItem,TransferDom,Popup,Picker } from 'vux';
   import mixins from '@/mixins/mixins'
   import TopBar from '@/components/top';


    export default {
       mixins: [mixins],
        metaInfo () {
          return {
            title: '新增异地接种记录'
          }
        },
        data(){
          return {
            topTitle:'新增异地接种记录',
            today:this.$moment().format('YYYY-MM-DD'),
            childrenName:'',
            dataValue:'',
            childList:[],
            childValue:[],
            childId:null,

            positionList: [['口服', '左大腿', '右大腿','左上臂','右上臂','前臂掌侧','其他']],
            positionValue: [],

            form:{
              userid:null,  // 用户Id
              babyid:null,  // 宝宝Id
              // handcomname:'',  // 接种地点
             /* inoposition:'',  //接种部位
              inodoctor:'',  // 接种医生
              inocomid:null,  // 接种单位Id
              inotime:'',  // 接种时间
              handcomname:'',   //接种地点*/

              hisList: [
                {
                  bathcno:'',  //接种疫苗的批号
                  vaccineSupplier:'', // 疫苗厂家
                  planid:null,  //疫苗计划Id
                  inotime:'',   // 接种时间
                  handcomname:'',   //接种地点
                  inoposition:'',    //接种部位
                  inodoctor:'',    // 接种医生

                  index: 1,
                  status:1,
                  attributeValue:'',
                  dosesValue:'',
                  isFree:'',
                  dosesName:[],
                  dosesList:[],
                  vaccinateName:[],   // 疫苗名称
                  positionValue:[],    // 接种部位
                }
              ]
            },

            vaccineList:[],
            vaccineValue:[],

            doseList:[],
            doseValue:[],

            vaccineListArrays:[],

            commpanyValue:'',

            pointList:[],
            pointValue:[],

            popupPoint:false,

            provinceList:[],
            provinceValue:[],

            cityList:[],
            cityValue:[],

            countryList:[],
            countryValue:[],

            pointArray:[],
            selectPoint:{},

            appendWrapperHtml:'',
            index: 1,
          }
        },
      mounted(){
        /*let children=JSON.parse(sessionStorage.getItem('children'));
        let childListArray=[];
        for(let i in children){
          childListArray.push({
            name:children[i].name,
            value:children[i].id
          })
        }
        this.childList=[childListArray];
        this.childId=sessionStorage.getItem('childId');

        for(let i in childListArray){
          if(childListArray[i].value==this.childId){
            this.childValue=[childListArray[i].name]
          }
        }
          // this.province();
        */


        let children=JSON.parse(sessionStorage.getItem('children'));
        let childId=JSON.parse(sessionStorage.getItem('childId'));
        for(let i in children){
            if(children[i].id==childId){
              this.childrenName=children[i].name;
            }
        }
        this.getVaccine();
        this.form.userid=sessionStorage.getItem('userId');
        this.form.babyid=sessionStorage.getItem('childId');
      },
      methods:{
        getVaccine(){
          let that=this;
          this.$api.get('/vaccinationReservation/queryAllPlan/'+sessionStorage.getItem('childId')).then( (res)=> {
            if(res.data.result==0){
              this.vaccineListArrays=res.data.obj;
              let vaccineListArray=[];
              for(let i in res.data.obj){
                vaccineListArray.push({
                  name:res.data.obj[i].name,
                  value:res.data.obj[i].id
                })
              }
              this.vaccineList=[vaccineListArray]
            }
          })
        },
        vaccineChange(val,index){
          let that=this;
          for(let i in this.vaccineListArrays){
            if(this.vaccineListArrays[i].id==val[0]){
              let vaccinecoding=this.vaccineListArrays[i].vaccinecoding;
              this.form.hisList[index].attributeValue=this.vaccineListArrays[i].type;

              this.$api.get(`/vaccinationReservation/queryPlanDoses/${vaccinecoding}`).then(function (res) {
                  let valist=res.data.obj;
                  let array=[];
                  for(let i in valist){
                    array.push({
                      name:valist[i].dose,
                      value:valist[i].id
                    })
                  }
                that.form.hisList[index].dosesList=[array];
              })

            }
          }
        },
        continueAdd(){
          this.index++;
          this.form.hisList.push({
            bathcno:'',  //接种疫苗的批号
            vaccineSupplier:'', // 疫苗厂家
            planid:null,  //疫苗计划Id
            inotime:'',   // 接种时间
            handcomname:'',   //接种地点
            inoposition:'',    //接种部位
            inodoctor:'',    // 接种医生

            index: this.index,
            status:1,
            attributeValue:'',
            dosesValue:'',
            isFree:'',
            dosesName:[],
            dosesList:[],
            vaccinateName:[],   // 疫苗名称
            positionValue:[],    // 接种部位
          });
        },
        handleRemove(index){
          this.form.hisList[index].status = 0;
          this.form.hisList.splice(1,index);
        },
        submit(){
          let formdata=Object.assign(this.form);
          let fomdata2=JSON.parse(JSON.stringify(formdata))

          for(let i in fomdata2.hisList){
              delete fomdata2.hisList[i].index;
              delete fomdata2.hisList[i].attributeValue;
              delete fomdata2.hisList[i].dosesValue;
              delete fomdata2.hisList[i].vaccinateName;
              delete fomdata2.hisList[i].status;
              delete fomdata2.hisList[i].isFree;
              delete fomdata2.hisList[i].dosesList;
              delete fomdata2.hisList[i].dosesName;
              delete fomdata2.hisList[i].positionValue;
          }

         this.$api.post('/vaccinationReservation/replenishInoculateRecord',fomdata2).then( (res)=> {
             if(res.data.result==0){
               this.$router.push({path: '/record'})
             }else{
               this.$vux.toast.text(res.data.msg, 'middle')
             }
          })
        },
        positionChange(item,index){
          this.form.hisList[index].inoposition=item[0];
        },
        province(){
          this.$api.post('/systemPick/findAllCities',{
            type:'PROVINCE',
            parentId:'zh'
          }).then( (res)=> {
            let data=res.data.obj;
            let array=[{
              name:'请选择',
              value:''
            }];
            for(let i in data){
              array.push({
                name:data[i].name,
                value:data[i].id
              })
            }
            this.provinceList=[array];
          })
        },
        provinceChange(val){
          if(val[0]){
            this.$api.post('/systemPick/findAllCities',{
              type:'CITY',
              parentId:val[0]
            }).then( (res)=> {
              let data=res.data.obj;
              let array=[{
                name:'请选择',
                value:''
              }];
              for(let i in data){
                array.push({
                  name:data[i].name,
                  value:data[i].id
                })
              }
              this.cityList=[array];
            })
            this.$api.get(`/systemPick/queryInoculatePoints/${val[0]}`).then( (res)=> {
              if(res.data.result==0){
                this.pointArray=res.data.obj;
              }
            })
          }
        },
        cityChange(val){
          if(val[0]){
            this.$api.post('/systemPick/findAllCities',{
              type:'COUNTRY',
              parentId:val[0]
            }).then( (res)=> {
              let data=res.data.obj;
              let array=[{
                name:'请选择',
                value:''
              }];
              for(let i in data){
                array.push({
                  name:data[i].name,
                  value:data[i].id
                })
              }
              this.countryList=[array];
            })
            this.$api.get(`/systemPick/queryInoculatePoints/${val[0]}`).then( (res)=> {
              if(res.data.result==0){
                this.pointArray=res.data.obj;
              }
            })
          }
        },
        countryChange(val){
          if(val[0]){
            this.$api.get(`/systemPick/queryInoculatePoints/${val[0]}`).then( (res)=> {
              if(res.data.result==0){
                this.pointArray=res.data.obj;
              }
            })
          }
        },
        pointClick(val){
          this.selectPoint=val;
          this.popupPoint=false;
          this.form.inocomid=val.value;
          this.form.handcomname=val.text;
        },
        dosesChange(val,index){
          let dosesList=this.form.hisList[index].dosesList[0];
          console.log(dosesList)

          for(let i in dosesList){
              if(dosesList[i].value==val[0]){
                this.form.hisList[index].planid=val[0];

                if(dosesList[i].ispay==1){
                  this.form.hisList[index].isFree='1';
                }else{
                  this.form.hisList[index].isFree='2';
                }
              }
          }
        }
      },
      components: {
        XInput,
        XButton,
        PopupPicker,
        Datetime,
        Checker,
        CheckerItem,
        TopBar,
        Popup,
        Picker
      },
      directives: {
        TransferDom
      },
    }
</script>

<style lang="scss">
    .add-record-wrapper{
      padding:10px 15px;
          .immunization-information{
            background:rgba(255,255,255,1);
            box-shadow:0px 0px 10px 1px rgba(50,51,51,0.06);
            border-radius:10px;
            padding:15px;
            .title{
              height:14px;
              font-size:15px;
              font-family:PingFang-SC-Regular;
              font-weight:400;
              color:rgba(38,38,38,1);
              border-left:4px solid #F56363;
              padding-left:3px;
            }
            .data-time-con{
              position: relative;
              .data-time{
                border-bottom:none;
                &.weui-cell_access .weui-cell__ft:after{
                  border-width:0;
                }
              }
              .calendar-img{
                width:25px;
                height:28px;
                position: absolute;
                top:12px;
                right:12px;
              }
            }
          }
          .vaccine-information{
            margin-top:10px;
            background:rgba(255,255,255,1);
            box-shadow:0px 0px 10px 1px rgba(50,51,51,0.06);
            border-radius:10px;
            padding:15px;
            .title{
              height:14px;
              font-size:15px;
              font-family:PingFang-SC-Regular;
              font-weight:400;
              color:rgba(38,38,38,1);
              border-left:4px solid #F56363;
              padding-left:3px;
            }
          }
          .weui-input{
            color:rgba(38,38,38,1);
            font-size: 14px;
            text-align: right;
            height: 30px;
            line-height: 30px;
            &::-webkit-input-placeholder {
              color:rgba(173,173,173,1);
              font-size: 14px;
            }
          }
          .weui-label{
          font-size:14px;
          font-family:PingFang-SC-Regular;
          font-weight:400;
          color:rgba(38,38,38,1);
        }
          .continue-add{
            text-align: center;
            padding:10px 0;
            margin:20px 0 10px;
            a{
              font-size:14px;
              font-family:PingFang-SC-Regular;
              font-weight:400;
              color:rgba(245,99,99,1);
              span{
                font-size:20px;
                margin-right: 2px;
              }
            }
          }
          .btn-con{
            width:100%;
            .weui-btn{
              height:50px;
              line-height: 50px;
              background:rgba(245,99,99,1);
              border-radius:24px;
              font-size:14px;
              font-family:PingFang-SC-Regular;
              font-weight:400;
              color:rgba(255,255,255,1);
            }
          }
          .group{
            border-bottom: 1px solid #EEEEEE;
            &-details{
              border-bottom:none;
            }
            &-commpany{
              border-bottom:none;
            }
            &-datetime{
              .vux-datetime{
                p{
                  font-size:14px;
                  font-family:PingFang-SC-Regular;
                  font-weight:400;
                  color:rgba(38,38,38,1);
                }
                .vux-cell-placeholder{
                  color:rgba(173,173,173,1);
                  font-size: 14px;
                }
                .vux-cell-primary{
                  padding-right: 26px;
                  height: 30px;
                  line-height: 30px;
                }
              }
            }
            &-dataTime{
              .weui-cell{
                padding:14px 15px;
              }
              .vux-cell-placeholder{
                color:rgba(173,173,173,1);
                font-size: 14px;
              }
              .vux-cell-value{
                color: #262626;
                font-size: 14px;
              }
              p{
                font-size: 14px;
                font-family: PingFang-SC-Regular;
                font-weight: 400;
                color: #262626;
              }
            }
            .vux-popup-picker-select{
              height: 30px;
              line-height: 30px;
              .vux-popup-picker-placeholder{
                color:rgba(173,173,173,1);
                font-size: 14px;
              }
              .vux-popup-picker-value{
                color:rgba(38,38,38,1);
                font-size: 14px;
                text-align: right;
                height: 30px;
              }
            }
            &-vaccine{
              .vux-popup-picker-select{
                line-height: 1;
              }
            }
            &-free{
              padding:10px 0;
              .vux-checker-item{
                font-size: 14px;
              }
              .demo1-item-selected{
                background: #f56363;
                color:#fff;
                border:none;
              }
            }
            &-dose{
              border-bottom: none;
            }
          }
       }
    .demo1-item {
      border: 1px solid #ececec;
      padding: 5px 15px;
    }
    .demo1-item-selected {
      border: 1px solid green;
    }
    .btn-con{
      button.weui-btn:focus, input.weui-btn:focus{
        background: #f56363;
        color: white;
      }
    }
    .record-popup{
      z-index:999!important;
      background:#fff!important;
      .select-con{
        display: flex;
        .vux-picker{
          flex: 1;
        }
      }
      .content-list{
        ul{
          padding:30px 20px;
          li{
            font-size: 14px;
            height: 30px;
            line-height: 30px;
            color: #262626;
          }
        }
      }
    }
  .close-text{
    float: right;
    font-size: 14px;
    color:rgba(245,99,99,1);
  }
</style>
